<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="合作状态">
					<el-select class="w-80" v-model="queryParams.status" placeholder="请选择" clearable filterable>
						<el-option label="待确认" :value="1" />
						<el-option label="进行中" :value="2" />
						<el-option label="已完结" :value="3" />
						<el-option label="已取消" :value="4" />
					</el-select>
				</el-form-item>
				<el-form-item label="渠道名称">
					<el-input class="w-[280px]" v-model="queryParams.ce_real_name" clearable />
				</el-form-item>
				<el-form-item label="用户名称">
					<el-input class="w-[280px]" v-model="queryParams.u_real_name" clearable />
				</el-form-item>
				<el-form-item label="合作编号">
					<el-input class="w-[280px]" v-model="queryParams.sn" clearable />
				</el-form-item>
				<el-form-item label="创建时间" class="picker">
					<daterange-picker v-model:startTime="queryParams.start_time" v-model:endTime="queryParams.end_time" />
				</el-form-item>
				<el-form-item label="合作类型">
					<el-select class="w-[280px]" v-model="queryParams.mode" placeholder="请选择" clearable filterable>
						<el-option label="全部" value />
						<el-option label="渠道合作" :value="1" />
						<el-option label="渠道买断" :value="2" />
						<el-option label="渠道返点" :value="3" />
					</el-select>
				</el-form-item>
				<el-form-item label="业务类型">
					<el-select class="w-[280px]" v-model="queryParams.product_cate_id">
						<el-option  v-for="(item) in optionsData.product_cate_list " :label="item.name" :value="item.id.toString()" :key="item.id.toString()"/>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none" shadow="never">
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号(ID)" prop="id" min-width="90" />
				<el-table-column label="合作类型" min-width="120" prop="mode" >
					<template #default="{ row }">
						<span v-if="row.mode == 1">渠道合作</span>
						<span v-if="row.mode == 2">渠道买断</span>
						<span v-if="row.mode == 3">渠道返点</span>
					</template>
				</el-table-column>
				<el-table-column label="合作编号" min-width="200" prop="sn" />
				<el-table-column label="创建时间" prop="create_time" min-width="180" />
				<el-table-column label="确认合作时间" prop="create_time" min-width="180" />
				<el-table-column label="合作状态" min-width="90">
					<template #default="{ row }"> {{row.status==1?'待确认':row.status==2?'进行中':row.status==3?'已完结':row.status==4?'已取消':''}} </template>
				</el-table-column>
				<el-table-column label="业务类型" min-width="120" prop="pc_name" />
				<el-table-column label="产品名称" prop="p_name" min-width="200" >
					<template #default="{ row }">
						<span>{{ row.p_name? row.p_name: '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="所需额度(万)" prop="quota" min-width="120">
					<template #default="{ row }">{{(row.quota/10000).toFixed(4)}}</template>
				</el-table-column>
				<!-- <el-table-column label="利率" prop="rate" min-width="100">
					<template #default="{ row }">{{row.rate}}%</template>
				</el-table-column>
				<el-table-column label="年限" prop="credit_year" min-width="100">
					<template #default="{ row }">{{row.credit_year}}年</template>
				</el-table-column>
				<el-table-column label="服务费(元)" prop="service_fee" min-width="100">
					<template #default="{ row }">{{row.service_fee}}</template>
				</el-table-column> -->
				<el-table-column label="用款时间" prop="use_money_time" min-width="120" />
				<el-table-column label="用户名称" prop="u_real_name" min-width="100" />
				<el-table-column label="用户头像" prop="u_avatar" min-width="100">
					<template #default="{ row }">
						<el-avatar :src="row.u_avatar" :size="58" />
					</template>
				</el-table-column>
				<el-table-column label="渠道名称" prop="ce_real_name" min-width="100" />
				<el-table-column label="渠道头像" prop="ce_avator" min-width="100">
					<template #default="{ row }">
						<el-avatar :src="row.ce_avator" :size="58" />
					</template>
				</el-table-column>
				<el-table-column label="渠道公司" prop="ce_company_name" min-width="200"/>
				<!-- <el-table-column label="产品id" prop="p_sn" min-width="200"/> -->
				<el-table-column label="纠纷" prop="is_dispute" min-width="100">
					<template #default="{ row }">
						<span v-if="row.is_dispute == 1">是</span>
						<span v-if="row.is_dispute == 0">否</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="220" fixed="right">
					<template #default="{ row }">
						<router-link v-perms="['cooperation.cooperation/detail']" :to="{ path: getRoutePath('cooperation.cooperation/detail'), query: { id: row.id } }">
							<el-button type="primary" link>详情</el-button>
						</router-link>
						<el-button v-perms="['cooperation.cooperation/isDispute']" type="primary" link @click="handleChange(row.id, row.is_dispute)">变更纠纷</el-button>
						<el-button v-perms="['cooperation.cooperation/closeCooperation']" type="danger" link @click="handleClose(row.id)">结束合作</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
			<el-dialog
				v-model="dialogVisible"
				title="变更纠纷"
    			width="360"
			>
				<div class="dispute-flex">
					<span>纠纷</span>
					<el-radio-group v-model="radio">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</div>
				
				<div class="dispute-flex">
					<el-button @click="()=>{dialogVisible = false}">取消</el-button>
					<el-button type="primary" @click="onRight">确认</el-button>
				</div>
			</el-dialog>
		</el-card>
	</div>
</template>
<script lang="ts" setup name="cooperationLists">
	import { cooperationLists, cooperationClose, cooperationDetail, isDispute } from '@/api/cooperate/lists';
	import { usePaging } from '@/hooks/usePaging';
	import { getRoutePath } from '@/router';
	import feedback from '@/utils/feedback';
	import { isEmpty } from "@/utils/util";
	import {useDictOptions} from "@/hooks/useDictOptions";
	import { productCate} from '@/api/product/product'

	const queryParams = reactive({
		status: '',
		ce_real_name: '',
		u_real_name: '',
		sn: '',
		start_time: '',
		end_time: '',
		mode: '',
		product_cate_id: ''
	})

	const {optionsData} = useDictOptions<{
		product_cate_list: any[],
		}>({
		product_cate_list: {
			api: productCate
		}
	})

	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: cooperationLists,
		params: queryParams
	})
	const dialogVisible = ref(false)
	const radio = ref(0)
	const dispute_id = ref()
	const handleChange = (id:any, is_dispute:number) => {
		console.log(id, is_dispute)
		dispute_id.value = id;
		radio.value = is_dispute;
		dialogVisible.value = true;
	}
	const onRight = async () => {
		console.log(dispute_id.value)
		console.log(radio.value)
		await isDispute({
			id: dispute_id.value,
			is_dispute: radio.value
		})
		dialogVisible.value = false;
		getLists()
	}
	const handleClose = async (id : number) => {
		await feedback.confirm('结束合作之后，合作状态将变为“已取消”，确认结束该合作？')
		await cooperationClose({ id })
		getLists()
	}

	onActivated(() => {
		getLists()
	})

	getLists()
</script>
<style lang="scss" scoped>
.dispute-flex{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	span{
		margin-right: 20px;
	}
}
.picker{
    width: 388px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
</style>